<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
    <style>

        .active {
            color:red;
        }

        .largeFont {
            font-size: x-large;
        }

    </style>

</head>
<body>
<div id="app">

    <div v-bind:class="{active:isActive}">Hello Vue!  </div>
    <div v-bind:class="activeObj">Hello Vue!  </div>
    <div v-bind:class="activeCom">Hello Vue!  </div>
    <div v-bind:class="[activeCom,bigFont]">Hello Vue!  </div>



    <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">Hello Vue!!</div>

</div>
<script>
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                activeObj:{active:true},
                isActive:true,
                activeColor:'red',
                fontSize:40,
                bigFont:'largeFont'
            },
            computed:{
                activeCom:function () {
                    return {
                      active:this.isActive
                    }
                }
            }
        }
    )
</script>


</body>
</html>